<script type="text/javascript">
$$(document).ready(function() {
    rescan();
    $$("#scan-wifi").click(function(){
        rescan();
    });
     $$("#btn_new_passwd").click(function(){
        configure();
    });
});

function connect(id){
    $$.post( "/ajax", { 
        'func': "wifi_connect", 
        'id': id
    }).done(function( data ) {
        $$(".ssid-node").remove()
        for(var i in data.ssids){
            $$("#ssids").append(make_ssid(data.ssids[i]))
        }
    });
}

function configure(){
    id = $$("#passwd_id").text();
    ssid = $$("#passwd_ssid").text();
    passwd = $$("#txt_new_passwd").val();
    $$("#wifi-spinner").css("display", "block");
    $$.post( "/ajax", { 
        'func': "wifi_configure", 
        'id': id, 
        'ssid': ssid, 
        'passwd': passwd
    }).done(function( data ) {
        $$("#wifi-spinner").css("display", "none");
        $$( "#dialog" ).dialog("close");
    });
}

function rescan(){
     $$("#wifi-spinner").css("display", "block");
     $$(".ssid-node").remove()
     $$.post( "/ajax", { 
        'func': "wifi_get_ssids"
    }).done(function( data ) {
        $$("#wifi-spinner").css("display", "none");
        for(var i in data.ssids){
            $$("#ssids").append(make_ssid(data.ssids[i]))
        }
    });
}

function make_ssid(ssid){
    var tr = $$("<tr></tr>")
    tr.attr("class", "ssid-node")
    button = $$("<button>Connect</button>")
    button.attr("type", "button")
    button.attr("ssid", ssid.id)
    button.attr("class", "connect")
    button.click(function(){
        connect($$(this).attr("ssid"));
    });
    tr.append($$("<td></td>").append(button))
    tr.append("<td>"+ssid.name+"</td>");
    if(ssid.in_use){
        tr.append("<td>Yes</td>")
    }
    else{
        tr.append("<td>No</td>")
    }
    if(ssid.associated){
        tr.append("<td>Yes</td>")
    }
    else{
        tr.append("<td>No</td>")
    }
    if(ssid.connected){
        tr.append("<td>Yes</td></td></td>")
    }
    else{
        tr.append("<td>Nope</td>")
        config = $$("<button>Configure</button>")
        config.attr("type", "button")
        config.attr("ssid", ssid.name)
        config.attr("class", "configure")
        config.attr("wifi_id", ssid.id)
        config.click(function(){
            $$( "#passwd_id" ).text(ssid.id);
            $$( "#passwd_ssid" ).text(ssid.name);
            $$( "#dialog" ).dialog();
        });
        tr.append($$("<td></td>").append(config))
    }
    return tr
}
</script>
<div>
    <h3>Wifi</h3>
    <p>To connect to a wifi network, make sure you have a wifi dongle in the USB slot</p>
    <img id="wifi-spinner" src="static/images/spinner_squares_circle.gif" style="display: block; margin-left: auto; margin-right: auto;">
    <table id="ssids">
        <tr>
            <th>Connect</th>
            <th>Name</th>
            <th>In use</th>
            <th>Associated</th>
            <th>Connected</th>
            <th>Configure</th>
        </tr>
    </table>
    <button type="button" id="scan-wifi">Rescan</button>
    <div id="dialog" title="New password" style="display: none;">
        <p>Set new password</p>
        <input type="hidden" id="passwd_id"></input>
        <input type="hidden" id="passwd_ssid"></input>
        <input type="password" id="txt_new_passwd"></input><br />
        <button type="button" id="btn_new_passwd">Set</button>
    </div>
</div>
